import React, { Component } from "react";
import store from "@/store";
import { addNum,subNum } from "@/store/action";
class Counter extends Component {
  clickAdd = () => {
    // 这里每次都确实可以更新store中的数据，但是页面不会自动更新
    // 需要手动刷新一下页面，也就是this.forceUpdate()
    // 这样显然很不方便，所有就有了react-redux这个插件
    store.dispatch(addNum(10))
    this.forceUpdate()
  };
  clickSub=()=>{
    store.dispatch(subNum(5))
    this.forceUpdate()
  }
  render() {
    const { count } = store.getState();
    return (
      <div className="counter">
        <div className="header">
          <h1>counter</h1>
        </div>
        <div>当前数量:{count}</div>
        <button onClick={() => this.clickAdd()}>加10</button>
        {/* <button onClick={this.clickAdd.bind(this)}>加10</button> */}
        <button onClick={() => this.clickSub()}>减5</button>
        {/* <button onClick={this.clickSub.bind(this)}>减5</button> */}
      </div>
    );
  }
}
export default Counter;
